<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  props: ['city_name'], //父组件传过来的商家的地址信息
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      let _that = this;
      AMapLoader.load({
        key: '5e9b1d5b4d5585adff1e9a73a00eb203', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [116.397428, 39.90923], //初始化地图中心点位置
          });
          // 通过传过来city_name 获取经纬度
          let geocoder = new AMap.Geocoder({});
          geocoder.getLocation(_that.city_name, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // result中对应详细地理坐标信息
              // console.log('地点查询', result);
              result.geocodes.forEach(item => {
                // console.log(item);
                let bus_lat = item.location.lat;
                let bus_lng = item.location.lng;
                // 给获取到的经纬度,添加点标记
                let marker = new AMap.Marker({
                  position: new AMap.LngLat(bus_lng, bus_lat), // 经纬度对象
                });
                _that.map.setZoomAndCenter(10, [bus_lng, bus_lat]);
                // 将创建的点标记添加到已有的地图实例：
                _that.map.add(marker);
                // 更新中心点
              });
            }
          });
        })
        .catch(e => {
          console.log(e);
        });
    },

    // methods end
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  destroyed() {
    this.map.destroy();
  },
};
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0 auto;
  width: 90%;
  height: 16rem;
}
</style>
